<template>
	<view class="me">
        <view class="bgHeader"></view>
        <view class="user_info row">
            <image class="avatar" :src="user.avatarUrl" mode="" />
            <view class="info">
                <view class="name">{{user.nickName}}</view>
				<vieew class="sex row">
					性别：
					<view v-if="user.gender==1" class="cuIcon-male  man"></view>
					<!-- <view v-if="user.gender==1" class="cuIcon-female woman"></view> -->
					<view v-if="user.gender==2" class="cuIcon-female woman"></view>
				</vieew>
            </view>
        </view>
		<view class="list">
			<view class="item row" v-for="(item,index) in navList" :key="index" @click="go(item)">
				<image v-if="item.type=='img'" class="icon" :src="item.icon"/>
				<view v-else class="icon" :class="item.icon"></view>
				{{item.name}}
                <!-- {{item.type}} -->
				<view class="cuIcon-right right"></view>
                <button  v-if="item.link=='service'"  open-type="contact"	class="btn"></button>
                <button  v-if="item.link=='feedback'"  open-type="feedback"	class="btn"></button>
                
			</view>
		</view>
			
		<my-footer cur="1"></my-footer>

	</view>
</template>

<script>
	
	export default {
		data() {
			return {
                col:"",
				
			}
		}, 
		created(){
			this.col=this.$parent.col
        },
        props:{
            user:{
                type:Object,
                default: {}

            },
            navList:{
                type:Object,
                default:{}
            }
        },
		methods: {
			
            
			go(item){
				if (item.type=="copy") {
					let openid= uni.getStorageSync('openid')
					uni.$copy(item.link+"?"+openid)
				}else{
					

					uni.navigateTo({
						url:item.link,
						success:(res)=>{
							console.log(res);
						},
						fail:(err)=>{
							console.log(err);
						}
					});
				}
				
			},
			
			
		}
	}
</script>

<style lang="scss">
    // @import "../main";
    .navList{
    flex-wrap: wrap;
    padding: 30rpx;
    background: #fff;
    .navItem{
        width: 20%;
        .icon{
            width: 100rpx;
            height: 100rpx;
        }
    }
}

.man,.woman{
    font-size: 30rpx;
}
.man{
    color: $man;
}
.woman{
    color: $woman;
}
.me{
    .user_info {
        width: 710rpx;
        background: #fff;
        height: 200rpx;
        margin: 20rpx;
        padding: 20rpx;
        border-radius: 10rpx;
        // margin-top: -280rpx;
        position: relative;
        z-index: 1000;
        .avatar {
            width: 100rpx;
            height: 100rpx;
            border-radius: 100rpx;
            margin-right: 30rpx;
            flex-shrink: 0;
        }

        .info {
            font-size: 26rpx;

            .name {
                font-size: 30rpx;
                font-weight: bold;
                color: #666;
                margin-bottom: 5rpx;
            }

            .sex {
                color: #999;
            }
        }
    }

    .list {
        background: #fff;
        width: 710rpx;
        margin: 20rpx;
        padding: 0rpx 20rpx;
        border-radius: 10rpx;
        // margin-top: 120rpx;
        .item {
            font-size: 32rpx;
            height: 100rpx;
            border-bottom: 1rpx solid #eee;
            padding: 20rpx 0rpx;
            position: relative;
            &:last-child {
                border-block-width: 0rpx;
            }
            .icon{
                margin-right: 10rpx;
            }
            image.icon {
                width: 50rpx;
                height: 50rpx;
            }
            view.icon{
                font-size: 50rpx;

            }

            .right {
                margin-left: auto;
            }
            .btn{
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0rpx ;
                left: 0rpx;
                margin: 0rpx;
                opacity: 0;
            }
        }
    }
}
</style>